<template>
  <div>
    <div @click="openConfig">
      <slot></slot>
    </div>
    <Modal v-model="configStatus" title="schema配置" width="900" draggable class="no-padding">
      <div class="content-bar">
        <div class="dim-label mrs" title="common.name">ID</div>
        <div class="dim-value" style="margin-right: 4px">
          <Input v-model="metaStoreObj.common.name" size="small" />
        </div>
        <div class="dim-value" title="随机名称">
          <Icon type="ios-color-wand" class="sort-btn" style="cursor: pointer" @click="randomName" />
        </div>

        <div class="dim-label mrs">名称</div>
        <div class="dim-value">{{ metaStoreObj.name }}</div>

        <div class="dim-label mrs">标题</div>
        <div class="dim-value">{{ metaStoreObj.title }}</div>

        <div class="dim-label mrs">节点名称</div>
        <a class="dim-value" @click="dialogState = true">{{ nodeName }}</a>

        <div class="dim-label mrs">schema位置</div>
        <div class="dim-value">{{ nodeTypeObj.curSchemaId }}.json</div>

        <div style="flex-grow: 1"></div>

        <div class="dim-label mrs">
          <a @click="refreshDemoView()">刷新</a>
        </div>
      </div>
      <div class="form-main page-form" style="overflow-y: auto; height: 500px">
        <div class="left-panel">
          <!-- jdbc表结构树 -->
          <tree-explore
            :schemaId="schemaId"
            :metaStoreObj="metaStoreObj"
            v-on:select-tree-node="selectTreeNode"
            ref="treeExploreRef"
          ></tree-explore>
        </div>
        <div>
          <!-- 配置项 -->
          <form-common
            :curNode="curNode"
            :attachPoint="attachPoint"
            :cfgList="cfgList"
            v-on:sort-up="sortUp"
            v-on:sort-down="sortDown"
            v-on:copy-dim="copyDim"
            v-on:delete-dim="deleteDim"
            v-on:add-dim-done="addDimDone"
            v-on:change-dyn-form="changeDynForm"
            ref="formCommonRef"
          ></form-common>
        </div>
        <div v-if="cfgReady" class="preview-panel">
          <Input v-model="curJsonStr" type="textarea" :rows="23" />
        </div>
      </div>
    </Modal>
    <Modal v-model="dialogState" title="Schema定义" width="680" draggable>
      <div style="height: 32px; line-height: 32px">
        <span class="dim-value">节点名称: {{ nodeName }}</span>
      </div>
      <Input v-model="schemaBlockStr" type="textarea" :rows="10" />
    </Modal>
  </div>
</template>

<script>
import DynamicObjectConst from './DynamicObjectConst';
import TreeExplore from './TreeExplore';
import FormCommon from './FormCommon';
import FormFunc from './common/FormFunc';
import BaseLib from '../base/BaseLib';
import FeatureLoader from '../framework/FeatureLoader';

export default {
  name: 'SchemaInspector',
  components: {
    TreeExplore,
    FormCommon,
  },
  data() {
    return {
      treeData: [],
      curNode: null,

      attachPoint: null,
      cfgList: [],

      // 为空节点初始化用
      nodeName: null,
      nodeTypeObj: {},

      schemaBlockStr: null,

      cfgReady: false,
      dialogState: false,

      configStatus: false,
    };
  },
  props: {
    schemaId: {
      type: String,
    },
    metaStoreObj: {
      type: Object,
      default: function () {
        return {
          common: {
            name: null,
            domain: 'AA',
            specificationVersion: '1.0',
            category: null,
          },
        };
      },
    },
  },
  computed: {
    componentId: function () {
      return FeatureLoader().comRequireMap[this.schemaId];
    },
    curJsonStr: function () {
      return this.attachPoint ? JSON.stringify(this.attachPoint, null, 4) : '';
    },
  },
  watch: {
    metaStoreObj: function () {
      this.$refs.treeExploreRef && this.$refs.treeExploreRef.clearSelect();
    },
  },
  methods: {
    openConfig() {
      this.configStatus = true;

      this.initTreeData();
      this.initDemoView();
    },
    randomName() {
      this.metaStoreObj.common.name = BaseLib.genKey();
    },
    sortUp(index) {
      this.$refs.treeExploreRef.sortUp(index, () => {
        this.refreshDemoView();
      });
    },
    sortDown(index) {
      this.$refs.treeExploreRef.sortDown(index, () => {
        this.refreshDemoView();
      });
    },
    copyDim(index) {
      this.$refs.treeExploreRef.copyDim(index, () => {
        this.refreshDemoView();
      });
    },
    deleteDim(index) {
      this.$refs.treeExploreRef.deleteDim(index, () => {
        this.refreshDemoView();
      });
    },
    addDimDone() {
      this.$refs.treeExploreRef.addDimDone();
    },
    changeDynForm(pModelKey) {
      this.$refs.treeExploreRef.changeDynForm(pModelKey);
    },
    initTreeData() {
      setTimeout(() => {
        this.$refs.treeExploreRef.initTreeData();
      });
    },
    //--------------------------------
    selectTreeNode(tmpNode) {
      this.curNode = tmpNode;

      this.nodeName = tmpNode.nodeName;
      this.attachPoint = tmpNode.attachPoint;
      this.nodeTypeObj = tmpNode.nodeTypeObj;

      this.schemaBlockStr = JSON.stringify(tmpNode.schemaBlock, null, 4);

      const retList = FormFunc.initCfgList(tmpNode);
      DynamicObjectConst.extendCfgList(tmpNode.nodeTypeObj.curSchemaId, retList, this.metaStoreObj);
      this.cfgList = retList;
    },
    //--------------------------------
    refreshDemoView() {
      this._computedWatchers.curJsonStr.dirty = true;
      this.$emit('refresh-demo-view');
    },

    aaa() {
      this.initTreeData();
      this.initDemoView();
    },

    initDemoView() {
      setTimeout(() => {
        this.cfgReady = true;
      });
    },
  },

  mounted() {},

  beforeDestroy() {},
};
</script>

<style scoped>
.left-panel {
  border-right: 1px solid rgba(23, 35, 61, 0.1);
}
.preview-panel {
  height: 100%;
  width: calc(100% - 440px);
}
/* ====== */
.content-bar {
  display: flex;
  padding: 0 16px;
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid rgba(23, 35, 61, 0.1);
}

/*==================*/

.edit-center-main {
  width: calc(100% - 220px);
  background-color: #f8f8f9;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dim-label {
  font-size: 13px;
  color: rgba(23, 35, 61, 0.75);
  margin-right: 8px;
}

.dim-value {
  margin-right: 16px;
}

.btn-bar {
  padding: 0 16px;
  margin-bottom: 16px;
}

.top-btn {
  width: 40px;
  margin-right: 8px;
}
.last-btn {
  margin-right: 0;
}

/* ===== */
.edit-chart-main {
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  position: relative;

  background-color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}

.chart-inner {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}

.sort-btn {
  font-size: 18px;
  color: rgba(23, 35, 61, 0.65);
  margin-right: 4px;
}

.no-padding /deep/ .ivu-modal-body {
  padding: 0;
}
</style>
